<%--<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" %>--%>
<%--<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>--%>
<%--<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>--%>
<%--<!DOCTYPE html>--%>
<%--<html>--%>
<%--<head>--%>
<%--    <title>与 ${message.receiverName} 的聊天</title>--%>
<%--    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet">--%>
<%--    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.11.1/font/bootstrap-icons.css" rel="stylesheet">--%>
<%--    <style>--%>
<%--        #chatBox{height:400px;overflow-y:auto;background:#f8f9fa}--%>
<%--        .msg-me{background:#cfe2ff;border-radius:.5rem;padding:.5rem 1rem;margin:.25rem 0;text-align:right}--%>
<%--        .msg-oth{background:#d1e7dd;border-radius:.5rem;padding:.5rem 1rem;margin:.25rem 0}--%>
<%--    </style>--%>
<%--</head>--%>
<%--<body class="container py-4">--%>
<%--<h4 class="mb-3">--%>
<%--    <a href="javascript:history.back()" class="btn btn-sm btn-outline-secondary me-2">--%>
<%--        <i class="bi bi-arrow-left"></i>--%>
<%--    </a>--%>
<%--    与 ${message.receiverName} 的对话--%>
<%--</h4>--%>

<%--<!-- 消息区域 -->--%>
<%--<div id="chatBox" class="border rounded p-2 mb-3">--%>
<%--    <c:if test="${not empty messages}">--%>
<%--        <c:forEach items="${messages}" var="message">--%>
<%--            <div class="${message.senderId == sessionScope.user.id ? 'msg-me' : 'msg-oth'}">--%>
<%--                    ${message.content}<br>--%>
<%--&lt;%&ndash;                <small class="text-muted">&ndash;%&gt;--%>
<%--&lt;%&ndash;                    <fmt:formatDate value="${message.sentTime}" pattern="yyyy-MM-dd HH:mm:ss"/>&ndash;%&gt;--%>
<%--&lt;%&ndash;                </small>&ndash;%&gt;--%>

<%--                        <small class="text-muted">--%>
<%--                            <i class="bi bi-calendar"></i>--%>
<%--                                ${message.sentTime}--%>
<%--                        </small>--%>

<%--            </div>--%>
<%--        </c:forEach>--%>
<%--    </c:if>--%>
<%--    <c:if test="${empty messages}">--%>
<%--        <p class="text-muted text-center">暂无聊天消息</p>--%>
<%--    </c:if>--%>
<%--</div>--%>

<%--<!-- 发送框 -->--%>
<%--<form id="sendForm" class="input-group">--%>
<%--    <input type="hidden" name="receiverId" value="${param.with}">--%>
<%--    <input type="text" class="form-control" name="content" placeholder="输入消息…" required>--%>
<%--    <button class="btn btn-primary">发送</button>--%>
<%--</form>--%>

<%--<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>--%>
<%--<script>--%>
<%--    const me = ${sessionScope.user.id};--%>
<%--    const he = ${param.with};--%>

<%--    function loadMsg() {--%>
<%--        $.getJSON('messageServlet?method=findMessageBySenderAndReceiver', {senderId: he, receiverId: me}, function (data) {--%>
<%--            let html = '';--%>
<%--            if (data && data.length > 0) {--%>
<%--                data.forEach(m => {--%>
<%--                    const cls = m.senderId == me ? 'msg-me' : 'msg-oth';--%>
<%--                    html += `<div class="${cls}">${m.content}<br><small class="text-muted">${m.sentTime}</small></div>`;--%>
<%--                });--%>
<%--            } else {--%>
<%--                html = '<p class="text-muted text-center">暂无聊天消息</p>';--%>
<%--            }--%>
<%--            $('#chatBox').html(html).scrollTop(1e9);--%>
<%--        });--%>
<%--    }--%>
<%--    loadMsg();--%>

<%--    $('#sendForm').submit(function (e) {--%>
<%--        e.preventDefault();--%>
<%--        $.post('messageServlet?method=addMessage', $(this).serialize(), function (data) {--%>
<%--            if (data === 'success') {--%>
<%--                loadMsg();--%>
<%--                $('#sendForm')[0].reset();--%>
<%--            } else {--%>
<%--                alert(data);--%>
<%--            }--%>
<%--        });--%>
<%--    });--%>
<%--</script>--%>
<%--</body>--%>
<%--</html>--%>







<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
    <title>与 ${param.withName} 的聊天</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.11.1/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        #chatBox{height:400px;overflow-y:auto;background:#f8f9fa}
        .msg-me{background:#cfe2ff;border-radius:.5rem;padding:.5rem 1rem;margin:.25rem 0;text-align:right}
        .msg-oth{background:#d1e7dd;border-radius:.5rem;padding:.5rem 1rem;margin:.25rem 0}
    </style>
</head>
<body class="container py-4">
<h4 class="mb-3">
    <a href="javascript:history.back()" class="btn btn-sm btn-outline-secondary me-2">
        <i class="bi bi-arrow-left"></i>
    </a>
    与 ${param.withName} 的对话
</h4>

<!-- 消息区域 -->
<div id="chatBox" class="border rounded p-2 mb-3">
    <c:if test="${not empty messages}">
        <c:forEach items="${messages}" var="message">
            <div class="${message.senderId == sessionScope.user.id ? 'msg-me' : 'msg-oth'}">
                    ${message.content}<br>
                <small class="text-muted">
                    <fmt:formatDate value="${message.sentTime}" pattern="yyyy-MM-dd HH:mm:ss"/>
                    <c:if test="${message.senderId != sessionScope.user.id}">
                        <span>来自 ${message.senderName}</span>
                    </c:if>
                </small>
            </div>
        </c:forEach>
    </c:if>
    <c:if test="${empty messages}">
        <p class="text-muted text-center">暂无聊天消息</p>
    </c:if>
</div>

<!-- 发送框 -->
<form id="sendForm" class="input-group">
    <input type="hidden" name="receiverId" value="${param.with}">
    <input type="text" class="form-control" name="content" placeholder="输入消息…" required>
    <button class="btn btn-primary">发送</button>
</form>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
    const me = ${sessionScope.user.id};
    const he = ${param.with};

    function loadMsg() {
        $.getJSON('messageServlet?method=findMessageBySenderAndReceiver', {senderId: he, receiverId: me}, function (data) {
            let html = '';
            if (data && data.length > 0) {
                data.forEach(m => {
                    const cls = m.senderId == me ? 'msg-me' : 'msg-oth';
                    html += `<div class="${cls}">${m.content}<br><small class="text-muted">${m.sentTime} <span>${m.senderName}</span></small></div>`;
                });
            } else {
                html = '<p class="text-muted text-center">暂无聊天消息</p>';
            }
            $('#chatBox').html(html).scrollTop(1e9);
        });
    }
    loadMsg();

    $('#sendForm').submit(function (e) {
        e.preventDefault();
        $.post('messageServlet?method=addMessage', $(this).serialize(), function (data) {
            if (data === 'success') {
                loadMsg();
                $('#sendForm')[0].reset();
            } else {
                alert(data);
            }
        });
    });
</script>
</body>
</html>



